<template>
    <div style="margin-bottom: 20px">
    </div>
    <el-tabs v-model="editableTabsValue" type="card" class="demo-tabs" closable @tab-remove="removeTab">
      <el-tab-pane v-for="item in tabss" :key="item.name" :label="item.title" :name="item.name" @click="router.push(item.content)"></el-tab-pane>
    </el-tabs>
  </template>
  <script lang="ts" setup> 
  import { ref } from 'vue'
  import { usePath } from '@/stores/path';
import { storeToRefs } from 'pinia';
import { useRouter } from 'vue-router';
const router=useRouter()
 
  const i=usePath()
  const {tabss} =i
  const {deleteTab}=usePath()
 
  const editableTabsValue = ref('2')
  const removeTab = (targetName: string) => {
          deleteTab(targetName as string)
    }

  </script>
  <style>
  .demo-tabs > .el-tabs__content {
    padding: 32px;
    color: #6b778c;
    font-size: 32px;
    font-weight: 600;
  }
  </style>